<template>
    <div style="min-width:809px">
        <div v-if="$route.path == '/freight'">
            <div class="vs-search-box">
                <el-form ref="form" :inline="true" :model="paging" label-width="120px">
                    <el-form-item label="门店：">
                        <el-select v-model="paging.store_id" clearable style="width:200px" placeholder="请选择">
                            <el-option
                                v-for="item in shopList"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="城市：">
                        <el-input style="width:200px" v-model="paging.title"></el-input>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="getList()" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <el-table v-loading="loading" :data="tableData"  height="calc(100vh - 310px)" header-row-class-name="has-gutter-table" style="width: 100%">
                    <el-table-column prop="areaCountry.area_name" label="城市列表" > </el-table-column>
                    <el-table-column  label="快递费用（元）" >
                        <template slot-scope="scope">
                            <el-input 
                            v-if="scope.row.freight"
                            type="number" clearable @blur="getBlur(scope.row)"
                            v-model="scope.row.freight.newPrice" style="width:120px;margin-right:10px" placeholder=""></el-input>
                            <!-- <el-button type="text" @click="getBlur(scope.row)">修改</el-button> -->
                       </template>    
                     </el-table-column>
                </el-table>
            </div>
        </div>
        <router-view></router-view>
        <el-dialog title="新增运费" :visible.sync="isInfo">
            <!-- width="570px" -->
            <!-- <el-table :data="recordList.filter(data => !search || data.title.toLowerCase().includes(search.toLowerCase()))" 
                v-loading="loading2" header-row-class-name="has-gutter-table" style="width: 100%">
                <el-table-column align="left">
                    <template slot="header" slot-scope="scope">
                        <el-input
                        v-model="search"
                        size="mini"
                        clearable
                        placeholder="输入关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        {{scope.row.title}}
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="快递费用" >
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.price" style="width:120px;margin-right:10px" placeholder=""></el-input>元
                    </template>
                </el-table-column>
            </el-table> -->
            <span slot="footer" class="dialog-footer">
                <el-button  @click="isInfo = false">取 消</el-button>
                <el-button type="primary" @click="isInfo = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isInfo:false,
            recordList:[],
            loading: false,
            paging: {
               title:'',
               store_id: ''
            },
            tableData: [],
            shopList: []
        };
    },
    created() {
       this.getList()
       this.homegetStore()
    },
    methods: {
        async homegetStore(){
            let {code,data} = await this.$Http.homegetStore();
            if(code){
                this.shopList = data;
            }
        },
       async getBlur(ele){
           if(ele.freight.newPrice*1 == ele.freight.price*1)return
            let { code, data } = await this.$Http.setFreight({area_country_id:ele.id,price:ele.freight.newPrice});
            if(code){
                this.$message.success('修改成功','succ')
                this.getList()
            }
        },
        async getList() {
            this.loading = true;
            let { code, data } = await this.$Http.getFreight(this.paging);
            this.loading = false;
            if (code) {
                let arr = data
                arr.forEach(ele=>{
                   if(!ele.freight){
                        ele.freight={}
                        ele.freight.price = ''
                   }
                   ele.freight.newPrice=ele.freight.price
                })
                this.tableData = arr;
            }
        },
        reset() {//重置
            this.paging = this.$options.data().paging;
            this.getList()
        },
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
</style>